<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>我的账户</title>
    
    <link rel="shortcut icon" href="/static/favicon.ico"/>
    <link rel="stylesheet" href="${_front_css}/mall_point.css">
    <link rel="stylesheet" href="${_front_font}/iconfont.css">
    <link rel="stylesheet" href="${_front_css}/base_new.css">
    <link rel="stylesheet" href="${_front_css}/library.css">
    <link rel="stylesheet" href="${_front_css}/style.css">
    <link rel="stylesheet" href="${_front_css}/account-claims.css">
    <script src="${_front_js}/jquery-1.11.1.min.js"></script>
    <script src="${_front_js}/jquery.countdown.js"></script>
    <script src="${_front_js}/js.js"></script>
    <!--[if lt IE 9]>
    <script src="/static/front/js/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script type="text/javascript" src="plugIn/PIE.js"></script>
    <![endif]-->
	<style type="text/css">
       .investment .quick_screen{display:inline;}
       .investment .quick_screen:after{display:block;content:'';overflow:hidden;width:0;height:0;celar:both;}
       .investment .quick_screen span{margin-top:8px;margin-left:25px;}
       .investment .screen ul li{float:left;margin:8px 5px;}
       .investment .screen ul li a{display:inline;padding:3px 10px;}
       .investment .screen ul li a.current{background:#6DBD45;color:#fff;}
       .investment .screen ul li a:hover{background:#6DBD45;color:#fff;}
       .Tab .Tab-shuaixuan{float:right;margin-top:-40px;cursor:pointer;width: 78px;height: 25px;border: #4db0c2 1px solid;background: #5dc0d2;
   		color: #fff;border-radius: 3px;-webkit-border-radius: 3px;-moz-border-radius: 3px;-ms-border-radius: 3px;text-align: center;behavior: url(plugIn/PIE.htc);line-height:25px;
   		}
   		.investment .quick_sxtj{margin-left:20px;}
   		.investment .quick_sxtj ul.clearfix li{font-size:12px;}
   		.investment .quick_sxtj ul.clearfix li input{border:1px solid #ccc;height:25px;}
   		.investment .quick_sxtj ul.clearfix li .quick_btn{
   		width:50px;height:27px;border: #4db0c2 1px solid;background: #5dc0d2;color: #fff;border-radius: 3px;-webkit-border-radius: 3px;-moz-border-radius: 3px;
    	-ms-border-radius: 3px;text-align: center;behavior: url(plugIn/PIE.htc);line-height:26px;cursor:pointer;margin-left:20px;
   		}
   		.ui_input{padding: 5px 10px;border: 1px solid #c1c1c1;border-radius: 3px;color: #595959;
		font-size: 14px;height: 30px;line-height: 30px;width: 254px;display: inline-block;float: left;outline: none!important;    	
    	}
    	.user{
			line-height: 35px;
		    height: 53px;    	
    	}
    	.change_btn{
		    padding: 1px 20px;
		    margin-left: 2px;
		    line-height: 30px;
		    text-align: center;
		    color: #fff;
		    background: #fc4255;
		    border: 0px;	
    	}
    	.spancolor{color:#f06a11;}
      </style>
</head>

<body>	
    <!-- 头部 开始 -->
    <div id="header">
    	<#include "../base/top.ftl" />
    </div>	
    <div class="content">
		<div id="myInvestmentMain" class="cnt clearfix layoutMain">
		   <#include "base1.ftl" />
		   <div class="investment fr">
            <h2>债权转让</h2>
            <div style="width:978px;padding-bottom:17px;">
                <p style="font-size:15px;line-height:30px;margin-bottom:10px;">
                <span class="spancolor">转让规则：</span>
                	投标满<span class="spancolor">15</span>天可进行债权转让操作。自提交申请成功<span class="spancolor">3</span>天后若无人承接，则该转让失败。
                	申请人可取消申请后，再重新转让。
                	</p>
			    <p style="font-size:15px;line-height:30px;margin-bottom:10px;">
			    <span class="spancolor">操作方式：</span>
			    	我的账户--理财管理--债权转让--<span class="spancolor">可转让的债权</span>，选择需要转让的债权点击<span class="spancolor">“转让”</span>。</p>
            </div>
            <div class="Tab" style="margin-top: 48px;" id="tab_menu">
                <span data="1" class="TabOne tableTab <#if temp==1>active</#if>">可转让的债权</span>
                <span data="2" class="TabTwo tableTab <#if temp==2>active</#if>">承接的债权</span>
                <span data="3" class="TabThree tableTab <#if temp==3>active</#if>">出售中的债权</span>
                <#if (allowPageInfo?? & allowPageInfo.pageList?size > 0)>
                    <table class="tabLibrary receivables" border="0" cellspacing="0" cellpadding="0" style='margin-top: 0px;display:block;'>
                    	<tbody>
                    		<tr>
		                        <th class="one" style="text-align:center;">借款标题 ｜ 投资金额</th>
		                        <th class="two" style="text-align:center;">年化率 ｜ 总期数</th>
		                        <th class="three" style="text-align:center;">持有期数 ｜ 可转让期数</th>
		                        <th class="four" style="text-align:center;">债权面额</th>
		                        <th class="five" style="text-align:center;">已收本息</th>
		                        <th class="five" style="text-align:center;">操作</th>
		                    </tr>
		                    <#list allowPageInfo.pageList as model>
	                     		<tr>
				                    <td class="one clearfix">
				                        <p class=" icon">
											<#if model.productId?exists && model.productId==3>
			                            		E
			                            	<#elseif model.productId?exists && model.productId==4>
			                            		车
			                            	<#elseif model.productId?exists && model.productId==5>
			                            		房
			                            	<#elseif model.productId?exists && model.productId==6>
			                            		商
			                            	<#elseif model.productId?exists && model.productId==7>
			                            		押
			                            	<#elseif model.productId?exists && model.productId==8>
			                            		担
			                            	<#elseif model.productId?exists && model.productId==10>
			                            		贷
			                            	</#if>
				                        </p>
				                        <div class="fr text" style="width:165px;">
					                        <#if model.title?exists && model.title?length lt 15>
					                        	${model.title}
					                        <#else>
					                        	${model.title?substring(0,15)}...
					                        </#if>
				                        <br>
					                        <span>
						                        <#if model.amount??>
													<#if (model.amount != 0 )>
										              	￥${model.amount?string('0.00')}
										            <#else>
										                ￥0.00
										             </#if>	
										        <#else>
										           ￥0.00
												</#if>
											</span>
				                        </div>
				                    </td>
				                    <td class="two">
				                        <i class="fl">${model.percent?string('0.00')}%</i><u class="fr">${model.period} 期</u>
				                    </td>
				                    <td class="three"><i class="fl">${model.recovedPeriod} 期</i><u class="fr">${model.period-model.recovedPeriod} 期</u></td>
				                    <td class="four"><i>
				                    	<#if model.awaitTotal??>
											<#if (model.awaitTotal != 0 )>
					                    		￥${model.fund?string('0.00')}
					                    	<#else>
					                    	 	￥0.00
					                    	</#if>
										<#else>
											￥0.00
										</#if>
				                    </i></td>
				                    <td class="four"><i>
				                    	<#if model.recovedMoney??>
											<#if (model.recovedMoney != 0 )>
					                    		￥${model.recovedMoney?string('0.00')}
					                    	<#else>
					                    	 	￥0.00
					                    	</#if>
										<#else>
											￥0.00
										</#if>
				                    </i></td>
				                    <td class="five"> <i>
				                    	<input type="button" value="转让" class="" onclick="change('${model.title}','${model.fund!}','${model.id}')" style="background-color:#fff;color:#3c9bf3;border:0px;cursor:pointer">
				                    </i></td>
				                </tr>
                    		</#list>
                    	</tbody>
                    </table>
                	<div class="tcdPageCode"></div>
                <#elseif temp==1>
	                <table class="tabLibrary receivables" border="0" cellspacing="0" cellpadding="0" >
	                	<tbody>
		                	<tr>
		                        <th class="one" style="text-align:center;">借款标题 ｜ 投资金额</th>
		                        <th class="two" style="text-align:center;">年化率 ｜ 总期数</th>
		                        <th class="three" style="text-align:center;">持有期数 ｜ 可转让期数</th>
		                        <th class="four" style="text-align:center;">债权面额</th>
		                        <th class="five" style="text-align:center;">已收本息</th>
		                        <!--<th class="five" style="text-align:center;">操作</th>-->
		                    </tr>
		                    <tr align="center">
		                    	<td colspan="10">暂无数据</td>
		                	</tr>
		                </tbody>
		            </table>
                <#elseif (myChangePageInfo?? & myChangePageInfo.pageList?size>0)>
	                <table class="tabLibrary receivables" border="0" cellspacing="0" cellpadding="0" >
	                	<tbody>
		                	<tr>
		                        <th class="one" style="text-align:center;">借款标题 ｜ 转让协议</th>
		                        <th class="two" style="text-align:center;">原债权人 ｜ 转让价格</th>
		                        <th class="three" style="text-align:center;">承接价格 ｜ 剩余期数</th>
		                        <th class="four" style="text-align:center;">年收益率</th>
		                        <th class="five" style="text-align:center;">承接日期</th>
		                        <th class="five" style="text-align:center;">待收本息</th>
		                        <!--<th class="five" style="text-align:center;">操作</th>-->
		                    </tr>
		                    <#list myChangePageInfo.pageList as model>
	                     		<tr>
				                    <td class="one clearfix">
				                        <p class=" icon">
				                        	<#if model.productId?exists && model.productId==3>
			                            		E
			                            	<#elseif model.productId?exists && model.productId==4>
			                            		车
			                            	<#elseif model.productId?exists && model.productId==5>
			                            		房
			                            	<#elseif model.productId?exists && model.productId==6>
			                            		商
			                            	<#elseif model.productId?exists && model.productId==7>
			                            		押
			                            	<#elseif model.productId?exists && model.productId==8>
			                            		担
			                            	<#elseif model.productId?exists && model.productId==10>
			                            		贷
			                            	</#if>
				                        </p>
				                        <div class="fr text" style="width:160px;">
				                        <#if model.title?exists && model.title?length lt 20>
				                        	${model.title}
				                        <#else>
				                        	${model.title?substring(0,20)}...
				                        </#if>
				                        <br>
				                        <a href="/change?id=<#if model.id?exists>${model.id}</#if>" target="_blank">转让协议</a>
				                        </div>
				                    </td>
				                    <td class="two">
				                        <i class="fl">
				                        	${model.username}
				                        </i>
				                        <u class="fr">
				                        	<#if model.changePrice??>
												<#if (model.changePrice != 0 )>
					                    			￥${model.changePrice?string('0.00')}
						                    	<#else>
						                    	 	￥0.00
						                    	</#if>	
						                    <#else>
						                    	￥0.00
											</#if>
				                        </u>
				                    </td>
				                    <td class="three"><i class="fl">
				                    	<#if model.recivePrice??>
											<#if (model.recivePrice != 0 )>
				                    			￥${model.recivePrice?string('0.00')}
					                    	<#else>
					                    	 	￥0.00
					                    	</#if>	
					                    <#else>
					                    	￥0.00
										</#if>
				                    </i><u class="fr">
				                    	<#if model.period??>
											${model.period} 期
										</#if>
				                    </u></td>
				                    <td class="four"><i>
				                    	<#if model.percent??>
											${model.percent?string('0.00')}%
										<#else>
											0.00%
										</#if>
				                    </i></td>
				                    <td class="four"><i>${(model.reciveDate?string("yyyy-MM-dd HH:mm:ss"))!}</i></td>
				                    <td class="four"><i>
				                    	<#if model.awaitTotal??>
											${model.awaitTotal?string('0.00')}
										<#else>
											0.00
										</#if>
				                    </i></td>
				                    <!--<td class="five"> <i>
				                    	<input type="button" value="查看" onclick="detail(${model.borrowId},${model.userId},${model.changeId})" class="" style="background-color:#fff;color:#3c9bf3;">&nbsp;&nbsp;
				                    	<input type="button" value="债权转让协议" onclick="zqxy(${model.id})" class="myhome_bnt1" style="background-color:#fff;color:#3c9bf3;border:0px;cursor:pointer">
				                    </i></td>-->
				                </tr>
                    		</#list>
		                </tbody>
		            </table>
		            <div class="tcdPageCode"></div>
                <#elseif temp==2>
	                <table class="tabLibrary receivables" border="0" cellspacing="0" cellpadding="0" >
	                	<tbody>
		                	<tr>
		                        <th class="one" style="text-align:center;">借款标题 ｜ 转让协议</th>
		                        <th class="two" style="text-align:center;">原债权人 ｜ 转让价格</th>
		                        <th class="three" style="text-align:center;width:170px;">承接价格 ｜ 剩余期数</th>
		                        <th class="four" style="text-align:center;">年收益率</th>
		                        <th class="five" style="text-align:center;">承接日期</th>
		                        <th class="five" style="text-align:center;">操作</th>
		                    </tr>
		                    <tr align="center">
		                    	<td colspan="10">暂无数据</td>
		                	</tr>
		                </tbody>
		            </table>
                <#elseif (salingPageInfo?? & salingPageInfo.pageList?size > 0)>
	                <table class="tabLibrary receivables" border="0" cellspacing="0" cellpadding="0" >
	                	<tbody>
		                	<tr>
		                        <th class="one" style="text-align:center;">借款标题 ｜ 转让协议</th>
		                        <th class="two" style="text-align:center;">转让价格 ｜ 转让期数</th>
		                        <!--<th class="three" style="text-align:center;">年收益率 ｜ 发布时间</th>-->
		                        <th class="four" style="text-align:center;">年收益率</th>
		                        <th class="four" style="text-align:center;width:170px;">发布时间</th>
		                        <th class="four" style="text-align:center;width:170px;">到期时间</th>
		                        <th class="five" style="text-align:center;width:">操作</th>
		                    </tr>
                     		<#list salingPageInfo.pageList as model>
	                     		<tr>
				                    <td class="one clearfix">
				                        <p class=" icon">
				  		                    <#if model.productId?exists && model.productId==3>
			                            		E
			                            	<#elseif model.productId?exists && model.productId==4>
			                            		车
			                            	<#elseif model.productId?exists && model.productId==5>
			                            		房
			                            	<#elseif model.productId?exists && model.productId==6>
			                            		商
			                            	<#elseif model.productId?exists && model.productId==7>
			                            		押
			                            	<#elseif model.productId?exists && model.productId==8>
			                            		担
			                            	<#elseif model.productId?exists && model.productId==10>
			                            		贷
			                            	</#if>
				                        </p>
				                        <div class="fr text" style="width:160px;">
				                        <#if model.title?exists && model.title?length lt 17>
				                        	${model.title}
				                        <#else>
				                        	${model.title?substring(0,17)}...
				                        </#if>
				                        <br>
				                        <a href="/change?id=<#if model.changeId?exists>${model.changeId}</#if>" target="_blank">转让协议</a>
				                        </div>
				                    </td>
				                    <td class="two">
				                        <i class="fl">
				                        	<#if model.changePrice??>
												<#if (model.changePrice != 0 )>
					                    			￥${model.changePrice?string('0.00')}
						                    	<#else>
						                    	 	￥0.00
						                    	</#if>	
						                    <#else>
						                    	￥0.00
											</#if>
				                        </i>
				                        <u class="fr">
				                        	<#if model.period??>
												${model.period} 期
											</#if>
				                        </u>
				                    </td>
				                    <!--
				                    <td class="three"><i class="fl">
				                    	<#if model.percent??>
											${model.percent?string('0.00')}%
										<#else>
											0.00%
										</#if>
				                    </i><u class="fr">${(model.publishDate?string("yyyy-MM-dd HH:mm"))!}</u></td>-->
				                    <td class="four"><i><#if model.percent??>${model.percent?string('0.00')}%<#else>0.00%</#if></i></td>
				                    <td class="four"><i>${(model.publishDate?string("yyyy-MM-dd HH:mm"))!}</i></td>
				                    <td class="four"><i>${(model.expireDate?string("yyyy-MM-dd HH:mm"))!}</i></td>
				                    <td class="five"> <i>
				                    	<input type="button" value="取消转让" onclick="cancel(${model.changeId})" class=""  style="background-color:#fff;color:#3c9bf3;border:0px;cursor:pointer">
				                    </i></td>
				                </tr>
                    		</#list>
		                </tbody>
		            </table>
		            <div class="tcdPageCode"></div>
                <#elseif temp==3>
	                <table class="tabLibrary receivables" border="0" cellspacing="0" cellpadding="0" >
	                	<tbody>
		                	<tr>
		                        <th class="one" style="text-align:center;">借款标题 ｜ 转让协议</th>
		                        <th class="two" style="text-align:center;">转让价格 ｜ 转让期数</th>
		                        <th class="three" style="text-align:center;">年收益率 ｜ 发布时间</th>
		                        <th class="four" style="text-align:center;">到期时间</th>
		                        <th class="five" style="text-align:center;">操作</th>
		                    </tr>
		                    <tr align="center">
		                    	<td colspan="10">暂无数据</td>
		                	</tr>
		                </tbody>
		            </table>
                </#if>
            </div>
        </div>
		</div>
    </div>

	<div id="msgDiv" style="margin-top: -75px;display:none;"	>
		<div id="msgDetail" class="content" style="background:#F2F2F2;">
			<div class="user">
                <label class="i-til">
                    <span class="red">借款标题：</span>
                </label>
                <div class="i-right" style=" margin-right: 114px;">
                	<input type="hidden" id="tenderId">
                    <input type="text" id="title" class="i-inp ui_input" readonly="readonly" style="background-color:#a19a99">
                </div> 
			</div>
			<div class="user">
				<label class="i-til">
                    <span class="red">债权面额：</span>
                </label>
                <div class="i-right" style=" margin-right: 114px;">
                    <input readonly="readonly" type="text" id="amount" class="i-inp ui_input" style="background-color:#a19a99">
                </div>
			</div>
			<div class="user">
				<label class="i-til">
                    <span class="red">竞拍底价：</span>
                </label>
                <div class="i-right" style=" margin-right: 114px;">
                    <input  readonly="readonly" type="text" id="min" class="i-inp ui_input" style="background-color:#a19a99">
                </div>
			</div>
			<div class="user">
				<label class="i-til">
                    <span class="red">截止时间：</span>
                </label>
                <div class="i-right" style=" margin-right: 114px;">
                    <input type="text" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',readOnly:'readOnly'})" id="date" class="i-inp ui_input">
                </div>
			</div>
		</div>
		<div style="margin:30px 195px;display: inline-flex;" >
			<input type="button" class="myhome_btn2" id="change-btn" style="" value="确定转让">
			<input type="button" class="myhome_btn2" id="cancel-btn" style="" value="关闭">
      	</div>
	</div>
	<div id="bgDiv"></div>
	
    <div id="footer">
      <div class="content">      
		<#include "../base/foot.ftl" />
      </div>
    </div>
      
    </div>
    </body>
	<script type="text/javascript" src="${_front_js}/jquery.page.js"></script>
	<script type="text/javascript" src="${_front_js}/tabs.js"></script>
	<script type="text/javascript" src="${_front_js}/My97DatePicker/WdatePicker.js"></script>
	<script type="text/javascript" src="${_front_js}/date.js"></script>
	<script type="text/javascript" src="${_front_js}/pagination/jquery.pagination.js"></script>
	<script type="text/javascript" src="${_front_js}/layer/layer.js"></script>
<script type="text/javascript">
		$(".tcdPageCode").createPage({
	        pageCount:<#if (allowPageInfo?? & allowPageInfo.pages?exists)>
	        			${allowPageInfo.pages}
	        		  <#elseif (myChangePageInfo?? & myChangePageInfo.pages?exists)>
	        		  	${myChangePageInfo.pages}
	        		  <#elseif (salingPageInfo?? & salingPageInfo.pages?exists)>
	        		  	${salingPageInfo.pages}		
        			  </#if>,//总页数
	        current:<#if (allowPageInfo?? & allowPageInfo.index?exists)>
	        			${allowPageInfo.index}
	        		  <#elseif (myChangePageInfo?? & myChangePageInfo.index?exists)>
	        		  	${myChangePageInfo.index}
	        		  <#elseif (salingPageInfo?? & salingPageInfo.index?exists)>
	        		  	${salingPageInfo.index}		
        			  </#if>,
	        backFn:function(index){
	            window.location.href="/account/change?index="+index+"&temp=${temp}";
	        }
	 	});
	
	$("#tab_menu span").click(function(){
		var temp = $(this).attr("data");
		if(temp != null){
			window.location.href="/account/change?temp="+temp;
		}
	})
 	$("#cancel-btn").click(function(){
		$("#changeDetail").hide();
		$("#repayDetail").hide();
	})
	
	function layerConfirm(conMsg, conYes , conTit , conNo) {
	    return layer.confirm(conMsg,conYes,conTit,conNo);
	}
	
	function change(title,amount,id){
		$("#title").attr("value",title);
		$("#amount").attr("value",amount);
		$("#min").attr("value",amount);
		$("#tenderId").attr("value",id);
		var bgObj = document.getElementById("bgDiv"); //背景
        var msgObj = document.getElementById("msgDiv"); //定义窗口
        msgObj.style.marginTop = (-250 + document.documentElement.scrollTop) + "px";
        document.getElementById("cancel-btn").onclick = function() { //关闭
            bgObj.style.display = msgObj.style.display = "none";
        }
        msgObj.style.display = bgObj.style.display = "block";
		$("#changeDetail").show();
	}

	$("#change-btn").click(function(){
		var min=$.trim($("#min").val());
		var date=$.trim($("#date").val());
		var amount=$.trim($("#amount").val());
		var id=$("#tenderId").val();
		if(min == ""){
			layer.msg("竞拍底价不能为空！");
			return;
		}
		if(date == ""){
			layer.msg("截止时间不能为空！");
			return;
		}
		
		$.ajax({
            type: "POST",
            url:"/account/change",
            data:{
            	"min":min,
            	"date":date,
            	"amount":amount,
            	"id":id
            },
            async: false,
            success: function(result){
            	if(result.code == -1){
					   layer.alert("债权发布成功!",function(index){
					     layer.close(index);
					   	 window.location.reload();
					   });
            	}else{
            		layer.alert(result.msg, function(index){
					    layer.close(index);
	            		if(result.code == 1){
		            		window.location.href="/login";
		            	}				    
					});  
            	}
            }
        });    
            
	})
	
	//还款记录
	function detail(borrowId,userId,changeId){
		$.ajax({
            type: "POST",
            url:"/change/borrow/detail",
            data:{
            	"borrowId":borrowId,
            	"userId":userId,
            	"changeId":changeId
            },
            async: false,
            success: function(result){
            	if(result.code==-1){
	            	var entityList=result.entity;
	            	var html="";
	            	for(var i=0;i<entityList.length;i++){
	            		html+="<tr>";
	            		var temp="";
	            		if(entityList[i].status=="Y"){
	            			temp="已还款";
	            		}else{
	            			temp="未还款";
	            		}
	            		html+="<td>"+entityList[i].title+"</td>"+
						  "<td>"+entityList[i].periodIndex+"</td>"+
						  "<td>￥"+entityList[i].paymentTotal+"</td>"+
						  "<td>￥"+entityList[i].paymentFund+"</td>"+
						  "<td>￥"+entityList[i].paymentInterest+"</td>"+
						  "<td>"+temp+"</td>"+
						  "<td>"+formatDate(new Date(entityList[i].expectDate))+"</td>";	
            			html+="</tr>";
	            	}
	            	$("#repayTbody").html(html);
	            	if(entityList.length>0){
	            		$("#dtitle").html(entityList[0].title);
	            	}
					$("#repayDetail").show();
            	}else{
            		layer.msg(result.msg);
            	}
            }
        });    		
	}   
	
	function cancel(changeId){
		layerConfirm("你确定要取消债权转让吗 ？", function (index) {
        	$.ajax({
	            type: "POST",
	            url:"/account/change/cancel",
	            data:{
	            	"changeId":changeId
	            }, 
	            async: false,
	            success: function(result){ 
	            	if(result.code == -1){
	            		layer.alert("取消成功!", function(index){
						    window.location.reload();
						});  
	            	}else{
	            		layer.alert(result.msg, function(index){
						    layer.close(index);
						});  
	            	}
	            }
	        });
	    });
	}
	function zqxy(id){
		window.open("/change?id="+id);
	} 	
	
</script>
</html>